<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="/static/css/animate.compat.css">

    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/static/css/me.css">
   
</head>
<body>
    <!-- 导航 -->
    <nav th:replace="_fragments :: menu(4)" class="ui secondary attached m-opacity-mid segment m-mini m-shadow animated fadeInDown">
        <div class=" ui container">
            <div class="ui secondary stackable menu">
                <h1 class="ui violet header item">GDPU NEWS</h1>
                    <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="folder icon"></i> 分类</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="window close outline icon"></i> 归档</a>
                    <a href="#" class="m-item item m-mobile-hide"> <i class="tags icon"></i>标签</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="question circle outline icon"></i> 关于 GDPU NEWS</a>

                    <div class="right item m-mobile-hide">
                        <div class="ui icon transparent input">
                            <input type="text" placeholder="Search...">
                            <i class="search link icon"></i>
                        </div>
                    </div>
            </div>

            <a href="" class="ui menu toggle blue icon button m-right-top m-mobile-show">
                <i class="sidebar icon">

                </i>
            </a>

        </div>


    </nav>
    <!-- 中间内容 -->
    <main class="m-large m-container-small animated fadeInRight">
       <div class="ui container">
          <!-- header -->
          <div class="ui  top attached segment">
            <div class="ui middle aligned two column stackable grid">
                <div class="column">
                    <h2 class="ui blue header">标签</h2>
                </div>
                <div class="right aligned column ">
                    共 <h2 class="ui red header m-inline-block" th:text="${#arrays.length(tags)}"> 9</h2>个
                </div>
            </div>

        </div>

        <div class="ui segment attached ">
            <div class="ui labeled button m-big" tabindex="0" th:each="tag : ${tags}">
                <div class="ui  button"  th:classappend="${tag.id==active} ? 'blue'" th:text="${tag.name}">  <i class="paperclip icon"></i>Forks </div>
                <a class="ui basic left pointing blue label" th:href="@{/tags/{id}(id=${tag.id})}" th:classappend="${tag.id==active} ? 'blue'" th:text="${#arrays.length(tag.news)}">

                    1,048
                </a>
              </div>
            <!--/*-->
              <div class="ui labeled button m-big" tabindex="0">
                <div class="ui basic blue button"><i class="paperclip icon"></i> Forks </div>
                <a class="ui basic left pointing blue label">
                  1,048
                </a>
              </div>
              <div class="ui labeled button m-big" tabindex="0">
                <div class="ui basic blue button"><i class="paperclip icon"></i> Forks </div>
                <a class="ui basic left pointing blue label">
                  1,048
                </a>
              </div>
              <div class="ui labeled button m-big" tabindex="0">
                <div class="ui basic blue button"><i class="paperclip icon"></i> Forks </div>
                <a class="ui basic left pointing blue label">
                  1,048
                </a>
              </div>
            <!--*/-->
        </div>

           <div class="ui top attached segment">
               <div class="ui padded vertical blue m-large segment" th:each="news : ${page.content}">
                   <div class="ui mobile reversed grid" >
                       <div class=" eleven wide column">
                           <h3 class="ui header">
                               <a href="" class="m-black" th:href="@{/news/{id}(id=${news.id})}" th:text="${news.title}" target="_blank">撒旦发射点发射点发生</a>

                           </h3>
                           <p class="m-line" th:text="|${news.description}.....|">
                               在制作html页面中，经常需要使用css来改变图片的大小来实现想要的效果，css改变图片大小有几种方法。下
                               面小编举例讲解CSS怎么改变图片的大小。组件存储库在NPM上发布，并在GitHub上作为标记发布。
                               检查下面的可用回购清单 语义组织 在GitHub上
                               每个组件的发行说明将自动与主要发行版中该组件的相关说明一起更新。
                           </p>
                           <div class="ui grid">
                               <div class="eleven wide column ">
                                   <div class="ui mini horizontal link list ">
                                       <div class="item">
                                           <img src="/static/images/cg1.png" alt="" th:src="@{${news.user.avatar}}" class="ui avatar image img-tiny">
                                           <div class="content">
                                               <a href="" class="header" th:text="${news.user.nickname}">大鸡巴</a>
                                           </div>
                                       </div>
                                       <div class="item ">
                                           <i class="calendar icon"></i><span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2020-8-9</span>
                                       </div>
                                       <div class="item">
                                           <i class="eye icon"></i><span th:text="${news.views}"></span>
                                       </div>

                                   </div>


                               </div>
                               <div class="right aligned five wide column">
                                   <a href="" target="_blank" class="ui label basic red" th:text="${news.type.name}">热点新闻</a>
                               </div>
                               <div class="row">
                                   <div class="column">
                                       <a href="" class="ui basic blue left pointing label m-mini" th:href="@{/tags/{id}(id=${tag.id})}"
                                          th:each="tag : ${news.tags}" th:text="${tag.name}"></a>
                                   </div>
                               </div>
                           </div>

                       </div>
                       <div class="five wide column">
                           <a href="" th:href="@{/news/{id}(id=${news.id})}" target="_blank">
                               <img src="../static/images/cg1.png" alt="" th:src="@{${news.firstPicture}}" class="ui rounded image img-style">
                           </a>
                       </div>
                   </div>
               </div>
           </div>
           <!-- 底部 -->
           <div class="ui bottom attached segment">
               <div class="ui middle aligned two column grid" th:if="${page.totalPages}>1">
                   <div class="column">
                       <a href="" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}" class=" ui teal button">上一页</a>
                   </div>
                   <div class="right aligned column ">
                       <a href="" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}" class=" ui teal button">下一页</a>
                   </div>
               </div>
           </div>

       </div>
       



    </main>
    
    

    <!-- 底部 -->
    <footer th:replace="_fragments :: footer" class="ui secondary m-opacity-mid vertical segment m-massive m-shadow">



    </footer>


    <!--/*/<th:block th:replace="_fragments :: script">/*/-->

    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <!--/*/</th:block>/*/-->

    <script>
        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');

        });
   
    </script>
   

</body>
</html>